<template>
  <div ref="sTopNav" class="magazineLists-slideTopNav" :style="styleObj">
    <div class="magazineLists-top-box">
      <div class="search-container">
        <magazine-lists-search></magazine-lists-search>
      </div>
      <div class="top-nav-box">
        <div class="hiddenBox">
          <ul class="nav-box" :style="styleObj2">
            <li
              v-for="(item, index) in navList"
              :class="['nav-item',...itemClassName]"
              :key="index"
              :style="[styleObj1]"
              @click="itemCategory(item.categoryId,index)"
            >
              <p
                :class="[activeItem==index && 'active']"
                :style="{color:item.titleColor,background:item.titleBackgroundColor}"
              >{{item.showtitle}}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="magazine-lists-box">
      <div class="magazine-lists-box-con" v-if="magazineList.length>0">
        <div v-for="(item,index) in magazineList" :key="index" class="list-item clearfix" @click="JumpName('magazine',{id:item.magazine_id})">
          <img :src="item.view_pic || defaultImg" />
          <a href="javascript:;" class="title">{{item.title}}</a>
        </div>
      </div>
      <div v-else-if="showNoData" class="empty">暂无数据</div>
    </div>
  </div>
</template>

<script>
  import magazineListsSearch from './../magazineListsSearch'
  import { searchMagazineList } from '@/api/shop/index'
  import Vue from 'vue'

  export default Vue.extend({
    name: 'index',
    components: {
      magazineListsSearch
    },
    data() {
      return {
        defaultImg:'https://img.wifenxiao.com/h5-wfx/images/default_goods_img.jpg',
        navList: [],
        styleObj: {},
        styleObj1: {},
        styleObj2: {},
        activeItem: 0,
        keyword: '',
        showNoData: false,
        magazineListParams: {
          p: 1,
          id: ''
        },
        magazineList: [],
        itemClassName: []
      }
    },
    props: {
      tplItemData: {
        type: Object // 传入参数的类型
      }
    },
    watch: {
      navList(val) {
        if (val.length > 0) {
          this.itemCategory(val[0].categoryId, 0)
        }
      }
    },
    mounted() {
      //   window.addEventListener('scroll', this.watchScroll)
      //   this.scrollTop = this.$refs.sTopNav.offsetTop
      this.navList = this.tplItemData.dataset
      this.styleObj.padding = this.tplItemData.modulePadding + 'px 0'
      this.styleObj.overflow = 'hidden'
      this.styleObj1.fontSize = this.tplItemData.fontSize + 'px'
      this.styleObj1.color = this.tplItemData.titleColor
      this.styleObj2.backgroundColor = this.tplItemData.moduleBackgroundColor
      // if (this.tplItemData.dataset.length === 1) {
      //   this.itemClassName.push('col1')
      // } else if (this.tplItemData.dataset.length === 2) {
      //   this.itemClassName.push('col2')
      // } else if (this.tplItemData.dataset.length === 3) {
      //   this.itemClassName.push('col3')
      // } else if (this.tplItemData.dataset.length === 4) {
      //   this.itemClassName.push('col4')
      // } else {
      //   // console.log('大于4')
      //   this.itemClassName.push('col4')
      // }
    },
    created() {
      // console.log(this.tplItemData, '专题分类导航组件')
    },
    methods: {
      JumpName(name, data) {
        this.$JumpName(this, name, data)
      },
      getMagazineList() {
        searchMagazineList(this.magazineListParams).then(res => {
          if (res.status == 1) {
            const resData = res.data
            if (resData.list.length > 0) {
              this.magazineListParams.p++
              this.magazineList = this.magazineList.concat(resData.list)
              this.getMagazineList()
            }
            if (this.magazineList.length <= 0) {
              this.showNoData = true
            } else {
              this.showNoData = false
            }
          }
        })
      },
      itemCategory(categoryId, i) {
        this.activeItem = i
        this.magazineListParams.id = categoryId
        this.magazineListParams.p = 1
        this.magazineList = []
        if (categoryId > 0) {
          this.getMagazineList()
        }
      }
    }
  })
</script>

<style lang='scss'>
@import "src/styles/mixin";
.magazineLists-slideTopNav {
  // width: 100%;
  .magazineLists-top-box{
    border-radius: 0px 0px 20px 20px;
    padding:0 24px;
    background: #fff;
  }
  .search-container{
    padding:20px 0 0;
  }
  .search-wrapper{
    position:relative;
    width: 100%;
    height: 72px;
    line-height: 72px;
    border-radius: 72px;
    font-size: 0;
    background: #f7f7f7;
    overflow: hidden;
    .icon {
      position:absolute;
      left:28px;
      top:22px;
      color:#999999;
      line-height:1;
      // font-size: 28px;
      margin-right: 10px;
      .icon_search{
        width:28px;
        height:28px;
      }
    }
    @include placeColor(#999);
    input {
      display: inline-block;
      width:100%;
      line-height: 40px;
      height: 40px;
      font-size: 24px;
      margin-top: 13px;
      padding:0 70px;
      border:0;
      background: transparent;
    }
  }
  .top-nav-box {
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    overflow-y: auto;
    .hiddenBox {
      overflow: hidden;
      .nav-box::-webkit-scrollbar {
        display: none;
      }
      .nav-box {
        display: flex;
        padding: 28px 0px;
        background: rgb(255, 255, 255);
        overflow-x: scroll;
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */
        li {
          // width: 140px;
          text-align: center;
          flex-shrink: 0;
          white-space: nowrap;
          margin-right: 20px;
          p {
            display: block;
            // width: 100%;
            text-align: center;
            // margin-right: 10px;
            // margin-bottom: 6px;
            padding: 12px 26px;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            border-radius: 56px;
            background: #f7f7f7;
            &.active{
              color:#fff;
              background: #F20B22; 
            }
          }
        }
        // .col1 {
        //   width: 90vw;
        // }
        // .col2 {
        //   width: 49vw;
        // }
        // .col3 {
        //   width: 33vw;
        // }
        // .col4 {
        //   width: 24vw;
        // }
        // .col5 {
        //   width: 22vw;
        // }
      }
    }
  }
  .magazine-lists-box{
    margin-top:20px;
    background-color: #fff;
    .list-item{
      position: relative;
      border-bottom: 2px solid #f7f7f7;
      overflow: hidden;
      padding: 20px 24px;
      font-size:0;
      img{
        display: inline-block;
        float: left;
        width: 80px;
        height: 80px;
        border: 0;
      }
      .title{
        padding-left: 16px;
        display: inline-block;
        font-size: 28px;
        color: #333;
        height: 80px;
        line-height:80px;
        width: calc(100% - 100px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .empty{
      line-height:80px;
      padding: 20px 24px;
      font-size: 26px;
      text-align:center;
      color: #666;
    }
  }
}
</style>
